@import "../base/_base";

.wrap {
  margin-top: 0.5rem;
  width: 100%;
  height: 10rem;//随着下拉添加高度
  position: relative;
  overflow: hidden; /* This is so we can position our slides absolutely off screen and we won't get any horizontal scroll bars */
  //background: $color2;
  color: #fff;
  text-align: center;
  input{
    visibility: hidden;
  }
  header {
    //background: $color5;
    box-shadow: 0 .01rem 0.01rem $color3;
    position: absolute; /* We position it absolutely to the top-left corner */
    top: 0;
    left: 0;
    z-index: 900; /*And give it a z-index of 900 so that we are sure that's on top of the rest of the content.*/
    width: 100%;
    label {
      color: $color1;
      cursor: pointer;
      display: inline-block; /* This way our labels will be side-by-side and centered in the middle of our header. Inline-block also allows for our line-height to be respected */
      line-height: 0.6rem; /* This gives us a larger clickable area*/
      padding: 0 0.6rem;
      margin-right: 0.3rem;
      font-size: .2rem;
      background-color: darken($color2,10%);
      &:hover {
        background: #2e353b;
      }
      @include respond-to(xs) {
        padding: 0 0.3rem;
      }
    }
  }
  .slide {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0.4rem;
    left: 100%; /* With these styles, we are pushing all of our slides off to the side of the window. */
    z-index: 10;
    padding: 0.1rem 0.1rem 0 0;

    background-color: #fff;
    background-position: 50% 50%;
    background-size: cover; /* now our images fill up the entire slide */
    transition: left 0s .75s; /* duration to 0.  delay it by 0.75 seconds. So these transition styles have the new slide coming in and afterwards our old slides, slides back out.*/
    h1 {
      opacity: 1;
      color: #2e353b;
      transform: translateY(100%);
      transition: transform .5s .5s, opacity .5s; /* This transition will allow us to see the opacity go down to zero, but it will delay the transform until the next slide is already covering it.*/
    }
    .htmleaf-header{
      //padding: 1em 190px 1em;
      letter-spacing: -1px;
      color: #2f3238;
      z-index: 10;
      .note_box {
        width: 8rem;
        margin: 0 auto;
        margin-top: 0.3rem;
        margin-bottom: 0.3rem;
        //background-color: lighten($color1,10%);

        display: flex;
          @include respond-to(xs) {
           width: 98% !important;
         }
        .note_img{
          margin-right: 0.2rem;
          max-width: 120px;
          min-width: 60px;
          max-height: 120px;
          min-height: 60px;
          .img{
            display: block;
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background:url('../../img/touxiang.jpg') center center no-repeat;
            overflow: hidden;
            @include respond-to(xs) {
              width: 80px !important;
              height: 80px !important;

            }
          }
        }
        .note_content{
          flex: 6;
          text-align: left;
          .title{padding-bottom: 0.2rem;font-size:180%;color: darken(#000,30%);font-weight: bold;
            @include respond-to(xs) {
              font-size:200% !important;
            }
          }
          .des{color:darken($color4,5%);font-size:150%;
           }
        }
      }
      }
    }
  }


[id^="slide"]:checked + .slide {
  left: 0;       /* When our radio element is checked, we want to position our slide back on the left corner of our wrapper, so we will set left to zero */
  z-index: 100;   /* we wanna raise the z-index to 100, to be sure our slide is on top of the previous one. */
  transition: left .65s ease-out;
}



